<template>
  <div id="teamManageLeft" >
    <el-container>
      <el-aside width="20%">
        <div><img alt="logo" src="@/assets/teamTeam.png" style="margin-top: 8%;margin-left: 10%;width: 80%;height: auto"></div>
        <el-divider ></el-divider>
        <el-button class="el-icon-user" type="text" style="color: black;margin-left: 15%" @click="teammateManagement">&nbsp;&nbsp;&nbsp;成员管理</el-button>
        <el-button class="el-icon-message" type="text" style="color: black;margin-left: 15%" @click="inviteByEmail">&nbsp;&nbsp;&nbsp;通过邮箱邀请</el-button>
        <el-button class="el-icon-link" type="text" style="color: black;margin-left: 15%" @click="inviteByLink" >&nbsp;&nbsp;&nbsp;通过链接邀请</el-button>
        <el-button class="el-icon-setting" type="text" style="color: black;margin-left: 15%" @click="teamSetting">&nbsp;&nbsp;&nbsp;团队设置</el-button>

        <el-divider ></el-divider>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose">
          <el-submenu index="1">
            <template slot="title">
              <span>&nbsp;&nbsp;团队列表</span>
            </template>
            <el-menu-item-group>

              <el-menu-item v-for="(item) in teams" :key="item.teamID" @click="checkTeam(item.teamID)" class="el-icon-crop" >&nbsp;&nbsp;{{item.teamName}}</el-menu-item>

            </el-menu-item-group>
          </el-submenu>
        </el-menu>
        <el-button class="el-icon-plus" type="text" style="color: black;margin-left: 15%" @click="createNewTeam">&nbsp;&nbsp;&nbsp;新建团队</el-button>

      </el-aside>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'teamManageLeft',
  data(){
    return{
      teamName:"",
      teamInfo:"",
      link:"",
      teams:[

      ]
    }
  },
  created() {
    this.$store.state.teamID=JSON.parse(localStorage.getItem("insuranceTeamCode"));
    this.$store.state.ID=JSON.parse(localStorage.getItem("insuranceUserCode"));

    this.$axios({
      method: 'get',           /* 指明请求方式，可以是 get 或 post */
      url: '/team',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
      params: ({
        userID:this.$store.state.ID,
      })
    })
      .then(res => {              /* res 是 response 的缩写 */
        this.teams=res.data.data
      })
      .catch(err => {
        /* 若出现异常则在终端输出相关信息 */
      })
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    teammateManagement(){
      this.$router.replace('/team/member')
    },
    inviteByEmail(){
      this.$router.replace('/team/invite1')
    },
    inviteByLink(){
      const formData=new FormData();
      formData.append("userID",this.$store.state.ID)
      formData.append("teamID",this.$store.state.teamID)

      this.$axios({
        method: 'post',           /* 指明请求方式，可以是 get 或 post */
        url: '/team/invite2',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: formData
      })
        .then(res => {              /* res 是 response 的缩写 */
          this.link=res.data.link
          this.$alert(this.link, '邀请链接', {
            confirmButtonText: '确定',

          });

        })
        .catch(err => {
          /* 若出现异常则在终端输出相关信息 */
        })
      this.copyLink()
    },
    copyLink(){
      //window.alert(JSON.stringify(this.link))
      this.$copyText(this.link);
    },
    teamSetting(){
      this.$router.push({path: '/team/settings'})
    },
    checkTeam(key){
      this.$store.state.teamID=key

      localStorage.setItem("insuranceTeamCode", JSON.stringify(this.$store.state.teamID));
      localStorage.setItem("insuranceUserCode", JSON.stringify(this.$store.state.ID));
      location.reload()
    },
    createNewTeam(){
      this.$prompt('请输入团队名称', '新建团队', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        const formData=new FormData();
        formData.append("userID",this.$store.state.ID)
        formData.append("teamName",value)
        formData.append("teamInfo","asd")
        this.$axios({
          method: 'post',           /* 指明请求方式，可以是 get 或 post */
          url: '/team/create',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
          data: formData
        })
          .then(res => {              /* res 是 response 的缩写 */
            this.result = res.data.data
          })
          .catch(err => {
            /* 若出现异常则在终端输出相关信息 */
          })
      });
    }
  }
}
</script>

<style scoped>
.el-menu {
  border-right:0!important;
}
#teamManageLeft{


}
</style>
